<!-- 
	动态组件：标题组件
	props: 
		data: 组件数据
		
	action:
		
 -->
<template>
    <view
        class="dynamic-title"
        :style="{
            backgroundColor: data.TitleBgColor ? data.TitleBgColor : '',
        }" @click="click()">
        <text
            class="title-text"
            :style="{
                color: data.TitleColor ? data.TitleColor : getMainColor(),
                borderColor: data.TitleLineColor ? data.TitleLineColor : getMainColor(),
            }"
            :class="{ 'title-line': data.TitleStyle == 2 }">
            {{ data.TitleContent }}
			<text class="text-more" v-if="data.TitleMore == 2">查看更多 <uni-icons type="arrowright" size="20" customIcons="icon-gray-1"></uni-icons></text>
        </text>
    </view>
</template>

<script>
import iconSearch from "./icon/icon_search.png"

import { getMainColor } from "./utils/util.js"
export default {
    props: {
        data: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {}
    },
    mounted() {
        this.$emit("loadBack", this.data.index)
    },
    methods: {
        getMainColor() {
            return getMainColor()
        },
		click() {
			if(this.data.TitleLink){
				let item = {
					Type:'custom',
					Value:this.data.TitleLink
				}
				this.$emit("titleClick",item)
			}
		},
    },
}
</script>

<style lang="scss" scope>
@import "@/uni-sub-base/components/dynamic/style/dynamic.scss";
.dynamic-title {
    height: 88rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 $dy-padding-default;
    background: #ffffff;
    .title-text {
        height: 36rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 28rpx;
		position: relative;
		width: 100%;
    }
	.text-more{
		position: absolute;
		right:0;
	}
    .title-line {
        padding-left: 10rpx;
        border-left: 6rpx solid;
        border-color: #000;
    }
}
</style>
